<template>
	<view>
		<!-- 搜索框 -->
		<view style="padding: 20rpx 30rpx;">
			<input v-model="keyword" @input="inputEvent()" placeholder="请输入用户的昵称/账号" 
				class="input_cls"/>
		</view>
		<!-- 结果列表 -->
		<view style="padding: 20rpx 30rpx;">
			<!-- 代表一个搜索的用户 -->
			<view v-for="u in users" class="user_view">
				<view class="left_view">
					<img :src="$.getImg(u.header)" class="header_img"/>
					<view class="text_view">
						<text style="font-weight: 900; margin-bottom: 30rpx;">{{u.nickname}}</text>
						<text style="font-size: 26rpx; color: gray;">{{u.username}}</text>
					</view>
					
				</view>
				<view class="right_view">
					<button style="margin: 0px; font-size: 27rpx; width: auto;" class="btn_cls" @click="openPopup(u.id)">添加好友</button>
				</view>
			</view>
		</view>
		
		<!-- 底部的弹出框 -->
		<uni-popup ref="popup" type="bottom">
			
			<view class="popup_cls">
				<input v-model="form.beizhu"  class="input_cls"  placeholder="好友备注"/>
				<textarea v-model="form.info" class="input_cls" style="margin: 20rpx 0rpx; width: auto;" placeholder="请输入验证消息"></textarea>
				<button class="btn_cls" style="width: auto; margin-top: 0px;" @click="send()">发送申请</button>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索的关键词
				keyword: "",
				//默认头像
				defaultHeader: "/static/header.jpeg",
				//搜索结果列表
				users: [],
				//表单参数
				form:{
					//申请好友的id
					toId: "",
					//备注信息
					beizhu: "",
					//验证信息
					info: ""
				}
			}
		},
		methods: {
			//搜索框输入事件
			inputEvent(){
				//发送请求搜索用户信息
				this.$.ajax({
					url: "/user/searchUsers",
					data: {
						keyword: this.keyword
					},
					success: (users) => {
						this.users = users;
					}
				});
				
			},
			//打开底部的弹出层
			openPopup(uid){
				this.form.toId = uid;
				this.$refs.popup.open()
			},
			//发送申请的方法
			send(){
				this.$.ajax({
					type: "POST",
					url: "/friendRequest/insert",
					data: this.form,
					success: () => {
						uni.showToast({
							title: "申请已发送..."
						})
					}
				});
			}
		}
	}
</script>

<style>

	.input_cls {
		background-color: white; 
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.user_view {
		height: 300rpx;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.user_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}
	
	.header_img {
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		border-radius: 100rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.left_view {
		display: flex;
	}
	
	.text_view {
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
	}
	
	.right_view {
		display: flex;
		flex-direction: column-reverse;
		height: 100%;
		margin-bottom: 120rpx;
	}
	
	.popup_cls{
		width: 100%;
		height: 600rpx;
		background-color: white;
		padding: 20rpx;
		box-sizing: border-box;
	}

</style>
